<template>
  <div>
    <el-card class="headNav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <div class="search">
      <el-input v-model="searchVal"></el-input>
      <el-button type="primary" @click="searchUser">搜 索</el-button>
    </div>
    <el-card>
      <Table :tHead="tHead" :tBody="tBody" :tButton="tButton">
      </Table>
    </el-card>

    <!-- 编辑框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form :model="editRuleForm" :rules="editRules" ref="editRuleForm" label-width="100px">
        <el-form-item label="所属门店:" prop="shop_name">
          <el-select v-model="editRuleForm.shop_name" placeholder="请选择所属门店">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名:" prop="consumer_nickname">
          <el-input v-model="editRuleForm.consumer_nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="consumer_login_phone">
          <el-input v-model="editRuleForm.consumer_login_phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editChange">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table.vue'
export default {
  name: 'Permission',
  components: { Table },
  data () {
    return {
      //表格
      tHead: [
        {
          prop: 'shop_name',
          label: '管理员级别'
        },
        // {
        //   prop: 'customer_id',
        //   label: '账号'
        // },
        {
          prop: 'consumer_nickname',
          label: '姓名'
        },
        {
          prop: 'consumer_login_phone',
          label: '手机号'
        },
        {
          prop: 'consumer_status',
          label: '状态',
          tSwitch: true,
          method: this.changeSwitch
        },
      ],
      tBody: [],
      tButton: [
        {
          content: '编辑',
          type: 'success',
          method: this.changeRow
        },
        {
          content: '删除',
          type: 'danger',
          method: this.deleteRow
        },
      ],
      tSwitch: {
        label: '状态',
      },
      //编辑框
      editVisible: false,
      editRuleForm: {
        shop_name: '',
        consumer_login_phone: '',
        consumer_nickname: '',
        customer_id: ''
      },
      editRules: {
        consumer_nickname: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      searchVal: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
    };
  },
  methods: {
    async getTableData () {
      let res = await this.$axios.get('/role')
      if (res.status !== 200) return this.$message('获取数据失败!')
      res.roleData.forEach(val => {
        if (val.consumer_status === 1) {
          val.consumer_status = true
        } else {
          val.consumer_status = false
        }
      })
      this.tBody = res.roleData
    },
    async changeSwitch (val) {
      let res = await this.$axios.post('/changeSwitch', { consumer_status: val })
      if (res.status !== 200) return this.$message.error('修改失败!')
      // this.getTableData()
    },
    async deleteRow (row) {
      let res = await this.$axios.post('/delRole', { id: row.customer_id })
      if (res.status !== 200) return this.$message.error('删除失败!')
      // this.getTableData()
    },
    changeRow (row) {
      this.editRuleForm.consumer_login_phone = row.consumer_login_phone
      this.editRuleForm.shop_name = row.shop_name
      this.editRuleForm.consumer_nickname = row.consumer_nickname
      this.editRuleForm.customer_id = row.customer_id
      this.editVisible = true
    },
    editChange () {
      this.$refs.editRuleForm.validate(async (valid) => {
        if (valid) {
          let res = await this.$axios.post('/editRole', { userData: this.editRuleForm })
          if (res.status !== 200) return this.$message.error('编辑失败!')
          this.$message.success('编辑成功!')
          this.editVisible = false
          // this.getTableData()
        } else {
          return false;
        }
      });
    },
    searchUser () {
      console.log('searchUser')
    }
  },
  created () {
    this.getTableData()
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="less">
.headNav {
  margin-bottom: 40px;
}
.search {
  width: 400px;
  .el-input {
    width: 200px;
    margin-right: 40px;
  }
}
</style>
